<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;list-style: none;}
        #select {width: 200px;margin: 100px auto;}
        #select input{width: 100%;}
        #select ul{display:none}
        #select ul li{border-bottom: 1px solid #000;}

    </style>
</head>
<body>
    <div id="select">
        <input type="text" value="">
        <ul>
            <li>1111</li>
            <li>2222</li>
            <li>3333</li>
        </ul>
    </div>

    <script>
        // 1.获取到对应需要操作的对象
        // 2，获取焦点展示对应的列表
        // 3.点击列表中的某个值，将值赋值给input框
        // 4将展开的列表隐藏

        var oselect=document.getElementById('select');
        var atext=oselect.getElementsByTagName('input')[0];
        var alist=oselect.getElementsByTagName('ul')[0];
        var ali=alist.children;
        console.log(ali);

        // 获取焦点展示对应的列表
        atext.onfocus=function(){
            alist.style.display="block";
        }

        for(var i=0;i<ali.length;i++){
            ali[i].onclick=function(){
                atext.value =this.innerText;
                alist.style.display="none";
            }
        }


    </script>
</body>
</html>